// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import Qt 4.7

 Item {
     id: flickableList
     clip: true

     signal clicked

     property alias delegate : repeater.delegate

     property variant items: []
     property int index: 0
     property int itemWidth : flickableList.width

     function scrollTo(id) {
         var x = id*flickableList.itemWidth
         if (flickArea.contentX != x) {
             centeringAnimation.stop();
             flickArea.newX = id*flickableList.itemWidth
             centeringAnimation.start();
         }
     }

     onIndexChanged: scrollTo(index)
     onWidthChanged: scrollTo(index)

     Flickable {
         id: flickArea
         property int newX: 0

         MouseArea {
             anchors.fill: parent
             onClicked: {
                 var x = mapToItem(flickableList, mouseX, mouseY).x

                 if (x < flickableList.width/3) {
                     if (flickableList.index > 0)
                         flickableList.scrollTo(flickableList.index-1);
                 } else if (x > flickableList.width*2/3) {
                     if (flickableList.index < flickableList.items.length-1)
                         flickableList.scrollTo(flickableList.index+1);
                 } else {
                     flickableList.clicked()
                 }

             }
         }

         PropertyAnimation {
             id: centeringAnimation
             target: flickArea
             properties: "contentX"
             easing.type: Easing.OutQuad
             from: flickArea.contentX
             to: flickArea.newX

             onCompleted: {
                 flickableList.index = flickArea.newX / flickableList.itemWidth
             }
         }

         onMovementStarted: {
             centeringAnimation.stop();
         }

         onMovementEnded: {
             var modulo = flickArea.contentX % flickableList.itemWidth;
             var offset = flickableList.itemWidth / 2;
             flickArea.newX = modulo < offset ? flickArea.contentX - modulo : flickArea.contentX + (flickableList.itemWidth - modulo);
             centeringAnimation.start();
         }

         width: flickableList.width
         height: flickableList.height
         contentWidth: items.width
         contentHeight: items.height
         flickDeceleration: 4000

         Row {
             id: items
             Repeater {
                 id: repeater
                 model: flickableList.items.length
             }
         }
     }
 }
